<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="allAlign = 'left'">居左</vxe-button>
        <vxe-button @click="allAlign = 'center'">居中</vxe-button>
        <vxe-button @click="allAlign = 'right'">居右</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table ref="myVxeTable" :align="allAlign" :data="tableData">
      <vxe-column type="seq" width="60" />
      <vxe-column field="name" title="Name" />
      <vxe-column field="sex" title="Sex" />
      <vxe-column field="age" title="Age" />
    </vxe-table>
    <CustomForm
      v-model="formModel"
      label-width="100px"
      :gutter="10"
      ref="customForm"
      :options="formOptions"
    />
    <el-button @click="btnClick">验证</el-button>
    <!-- <el-select v-model="value" class="m-2" placeholder="Select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select> -->
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { VxeTablePropTypes } from "vxe-table";
import CustomForm from "@/components/CustomForm/index.vue";
import { FormOptions } from "@/components/CustomForm/type";
import { useForm } from "@/hooks/useFrom";
interface RowVO {
  id: number;
  name: string;
  role: string;
  sex: string;
  age: number;
  address: string;
}
const allAlign = ref<VxeTablePropTypes.Align>(null);
let { createModel } = useForm();
let formOptions = ref<FormOptions[]>([
  {
    tag: "el-input",
    label: "姓名",
    value: "测试",
    prop: "name",
    span: 6,
    rules: [{ required: true, message: "姓名不能为空", trigger: "none" }],
    attrs: {
      clearable: true,
      class: "my-input",
      placeholder: "姓名",
    },
  },
  {
    tag: "el-input",
    label: "性别",
    prop: "sex",
    value: "123",
    span: 12,
    attrs: {
      clearable: true,
      placeholder: "性别",
    },
  },
  {
    tag: "el-select",
    label: "地区",
    prop: "area",
    value: "",
    span: 12,
    children: [
      { tag: "el-option", value: "1", label: "北京" },
      { tag: "el-option", value: "2", label: "上海" },
      { tag: "el-option", value: "3", label: "广州" },
    ],
    attrs: {},
    on: {
      change: (val) => {
        console.log("change", val);
        if (val === "2") {
          console.log("formModel", formModel.sex);
          formModel.sex = "上海";
          formOptions.value[1].hide = true;
        } else {
          formOptions.value[1].hide = false;
        }
      },
    },
  },
]);
let formModel = createModel(formOptions.value);
const tableData = ref<RowVO[]>([
  {
    id: 10001,
    name: "Test1",
    role: "Develop",
    sex: "Man",
    age: 28,
    address: "test abc",
  },
  {
    id: 10002,
    name: "Test2",
    role: "Test",
    sex: "Women",
    age: 22,
    address: "Guangzhou",
  },
  {
    id: 10003,
    name: "Test3",
    role: "PM",
    sex: "Man",
    age: 32,
    address: "Shanghai",
  },
  {
    id: 10004,
    name: "Test4",
    role: "Designer",
    sex: "Women",
    age: 24,
    address: "Shanghai",
  },
]);
let myVxeTable = ref();
let customForm = ref();
let btnClick = () => {
  console.log("myVxeTable", myVxeTable.value);
  console.log("表单", formModel);
  customForm.value.validate();
};
</script>
<style lang="scss" scoped>
.li-item {
  padding: 10px;
}
</style>
